<template>
    <div>
<el-card style="width: 1200px;">
            <el-tabs v-model="activeName">
                <el-tab-pane label="全部商品" name="first">
                    <el-table :data="Goods" @select="handleSum" @select-all="handleSum" ref="multipleTable">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="name" label="名称" width="180"></el-table-column>
                        <el-table-column label="数量" width="280">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.count" @change="handleSum"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="单价" width="180">
                            <template slot-scope="prices">
                                <span>￥{{prices.row.price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" width="180">
                            <template slot-scope="money">
                                <span>￥{{money.row.price*money.row.count}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin: 20px;">
                        总价：<span style="color: red;">￥{{sum}}</span>
                    </div>
                </el-tab-pane>
                
            </el-tabs>
        </el-card>

    </div>
</template>

<script>

    export default {
        data(){
            return{
                sum: 0,
                activeName: 'first',
                Goods: [{
                    name: 'apple',
                    price: 6,
                    count: 1
                }, {
                    name: 'pear',
                    price: 30,
                    count: 1
                }, {
                    name: 'banana',
                    price: 120,
                    count: 1
                }, {
                    name: 'orange',
                    price: 328,
                    count: 1
                }, {
                    name: 'pineapple',
                    price: 648,
                    count: 1
                }],
                goods: []
            }
        },
        methods:{
            handleSum() {
                    this.sum = 0;
                    this.$nextTick(() => {
                        this.$refs.multipleTable.selection.forEach(item => {
                            this.sum += (item.price * item.count)
                        });
                    })
                },
                handleDelete(i) {
                    this.Goods.splice(i, 1);
                    this.handleSum();
                },
                
            }

        
    }
</script>

<style lang="less" scoped>

</style>